<template>
    <div class="coupons flex flexv">
        <pub-head title="选择优惠券"></pub-head>
			<div v-if="youList.length!=0">
				<ul class="flexv coupons-lists">
				    <li class="coupons-list flex jus-b" v-for="(item,ind) in youList" :key="item.id">
				        <div class="coupons-cut flexv jus-c">
				            <p class="oneline red ali-b bold jus-c">￥<b>{{item.deduct}}</b></p>
				            <p class="oneline tc">满{{item.enough}}元可用</p>
				        </div>
				        <div class="coupons-info flexv jus-c">
				            <p>{{item.name}}</p>
				            <p class="grey">{{item.use_start_time}}-{{item.use_end_time}}</p>
				        </div>
						<div class="coupons-right flex ali-c jus-c">
							 <img src="@/assets/checked.png" class="check" :data-index='item.check' v-if="item.check" @click="chooseGoods(ind)" alt="">
							 <img src="@/assets/check.png" class="check" :data-index='item.check' v-else alt="" @click="chooseGoods(ind)">
						</div>
				      
				    </li>
				</ul>
			</div>
                

                <!--为空提示-->
            <empty :src="emptyIco" tip="没有可使用的优惠券哦~" icoWidth="4.16rem" icoHeight="3.1rem" v-else></empty>
                
            
          

    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import Empty from '@/components/theEmptyTemplate';
import { MyCoupons,Suitable } from '@/request/api';
import { Dialog,Tab, Tabs, Toast,Checkbox, CheckboxGroup} from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup);

export default {
    data(){
        return{
            emptyIco: require('@/assets/cash_withdrawal.png'),// 为空图片
            isNone: false, // 没有优惠券？
            numa: null,// 未使用数量
            numb: null,// 已使用数量
            numc: null,// 已过期数量
            data: [] ,// 所有数据
            state: 1,
			checked: false,
			price:0,
			youList:[]
        }
    },
    components: {
        pubHead,
        'empty': Empty,
        'van-tabs': Tabs,
        'van-tab': Tab,
    },
    mounted () {//给window添加一个滚动滚动监听事件
        window.addEventListener('scroll', this.handleScroll)
    },
    watch: {},
    created(){
		console.log(this.$route.query.price)
		this.price = this.$route.query.price
        this.$loading('请稍后...');
        this.getData();
    },
    methods: {
        onClick(index, title) {
            this.state = ++index;
            this.getData();
        },
        getData() {
           Suitable({
                token:localStorage.getItem('token'),
                pay_price:this.price,
				page:1,
				pagesize:10
            }).then(res => {
                if (res.code == 1) {
                    Toast.clear();
                    const data = res.data;
                    this.data = data;
					this.youList = res.data.list
					this.youList.forEach((item) =>{
					    item.check = false;
					})
					console.log(this.youList)
                } else {
                    Toast.clear();
                    this.$tip(res.msg)
                }
            })
        },
		// 选择商品
		chooseGoods(father){
		    // 改变当前商品的选择状态
			
			this.youList[father].check = !this.youList[father].check
			
		    // 查看当前商品所在店铺是否满足店铺全选
		    let goodsArr = [];
		    this.youList.map((item) =>{
		        if(item.check){
		            goodsArr.push(item)
		        }
		    })
		 
		},
        // 删除
        del(val){
            Dialog.confirm({
                title: '您确定要删除该藏品吗？',
                // className: 'red'
            }).then(()=>{
                // on confirm

            }).catch(() =>{
                // on cancel
            })
        },
        toUse(){
            this.$router.push('/')
        },
        //改变元素#searchBar的top值
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            if(scrollTop<=10){
                document.querySelector('#searchBar .van-tabs__wrap').style.top = '1.08rem';
            }else{
                document.querySelector('#searchBar .van-tabs__wrap').style.top = '0.88rem';
            }
        },
        // 时间转换
        timeChange(timeinfo) {
            var date = new Date(timeinfo * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '.';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '.';
            var D = (date.getDate() < 10 ? '0' +date.getDate() : date.getDate());
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); 
            return Y+M+D;
        }
    },
    beforeDestroy(){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>
<style lang="less" scoped>
.coupons{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 列表
    .coupons-lists{
        padding: 0 0.2rem;
        .coupons-list{
            height: 1.7rem;
            margin-top: 0.22rem;
            border-radius: 0.1rem;
            background-color: #fff;
            position: relative;
            overflow: hidden;
            .coupons-cut{
                padding: 0.25rem 0;
                width: 2rem;
				background-color:#50AD22 ;
                border-right: 1px solid #f5f5f5;
				border-right: 0.04rem dotted #fff;
                .red{
                    font-size: 0.3rem;
                    line-height: 120%;
                    b{
                        font-size: 0.46rem;
                        font-weight: normal;
                        line-height: 120%;
                    }
                }
                .oneline{
                    margin-top: 0.1rem;
                    font-size: 0.24rem;
                    line-height: 120%;
                    color: #fff;
                }
            }
            .coupons-info{
                padding: 0 0.2rem 0.2rem;
                line-height: 120%;
                color: #333;
                p{
                    font-size: 0.26rem;
                }
                .grey{
                    margin-top: 0.34rem;
                    font-size: 0.24rem;
                }
            }
			.coupons-right{
				flex: 1;
				.check{
				    width: 0.38rem;
				    height: 0.38rem;
				    border-radius: 100%;
				    margin: auto 0;
				}
				.goods_img{
				    width: 1.8rem;
				    height: 1.8rem;
				    margin-left: 0.28rem;
				    border-radius: 0.1rem;
				    border: 1px solid #f5f5f5;
				    overflow: hidden;
				    img{
				        margin: auto;
				    }
				}
			}
            .coupons-btns{
                width: calc(25% - 0.14rem);
                font-size: 0.32rem;
                // line-height: 1.7rem;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333;
				.toUse{
					color: #FE5557;
					width: 1.26rem;
					height: 0.5rem;
					border: 0.01rem solid #FE5557;
					border-radius: 0.2rem;
					line-height: 0.5rem;
				}
            }
            .used{
                background-color: #E4E7ED;
            }
        }
        // .coupons-list::before{
        //     content: "";
        //     width: 0.28rem;
        //     height: 0.28rem;
        //     position: absolute;
        //     z-index: 10;
        //     top: -0.16rem;
        //     left: 75%;
        //     border-radius: 100%;
        //     background-color: #f5f5f5;
        // }
        // .coupons-list::after{
        //     content: "";
        //     width: 0.28rem;
        //     height: 0.28rem;
        //     position: absolute;
        //     z-index: 10;
        //     bottom: -0.16rem;
        //     left: 75%;
        //     border-radius: 100%;
        //     background-color: #f5f5f5;
        // }
    }
}
</style>
<style lang="less">
.van-dialog__confirm, .van-dialog__confirm:active{
    color: #50AD22;
}
.van-tabs__line{
	background-color:#50AD22;
}
.coupons{
    .van-tab{
        color: #666;
        font-size: 0.28rem;
    }
    .van-tab--active{
        color: #50AD22;
    }
    .van-tabs__wrap{
        width: 100%;
        max-width: 750px;
        height: 0.9rem;
        margin: 0 auto;
        position: fixed;
        top: 1.08rem;
        border-bottom: 1px solid #efefef;
		z-index: 999;
    }
    .van-tab{
        line-height: 0.9rem;
    }
    .van-tabs--line{
        padding-top: 0.9rem;
    }
    [class*=van-hairline]::after{
        border-top: none !important;
    }
}
</style>
